<template>
    <div class="flow-historder-dialog-container">
        <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
            <el-form ref="historderDialogFormRef" :model="state.ruleForm" :rules="state.rules" size="default" label-width="90px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="审批流程">
							<el-select v-model="state.ruleForm.processId" placeholder="请选择" clearable class="w100">
								<el-option
									v-for="proces in procesList"
									:key="proces.id"
									:label="proces.displayName"
									:value="proces.id">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="流程定义ID" prop="processId">
                            <el-input v-model="state.ruleForm.processId" placeholder="请输入流程定义ID" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="状态" prop="orderState">
                            <el-input v-model="state.ruleForm.orderState" placeholder="请输入状态" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="发起人" prop="creator">
                            <el-input v-model="state.ruleForm.creator" placeholder="请输入发起人" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="发起时间" prop="createTime">
                            <el-input v-model="state.ruleForm.createTime" placeholder="请输入发起时间" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="完成时间" prop="endTime">
                            <el-input v-model="state.ruleForm.endTime" placeholder="请输入完成时间" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="期望完成时间" prop="expireTime">
                            <el-input v-model="state.ruleForm.expireTime" placeholder="请输入期望完成时间" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="优先级" prop="priority">
                            <el-input v-model="state.ruleForm.priority" placeholder="请输入优先级" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="父流程ID" prop="parentId">
                            <el-input v-model="state.ruleForm.parentId" placeholder="请输入父流程ID" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="流程实例编号" prop="orderNo">
                            <el-input v-model="state.ruleForm.orderNo" placeholder="请输入流程实例编号" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="附属变量json存储" prop="variable">
                            <el-input v-model="state.ruleForm.variable" placeholder="请输入附属变量json存储" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="flowHistorderDialog">
    import { reactive, ref, nextTick,onMounted } from 'vue';
    import constConfig from '/@/utils/constConfig';
    import { historderApi } from '/@/api/flow/historder';
    import { processApi } from '/@/api/flow/process';

    // 定义子组件向父组件传值/事件
    const emit = defineEmits(['refresh']);

    const procesList = ref([]);
    // 定义变量内容
    const historderDialogFormRef = ref();
    const state = reactive({
        ruleForm: {} as HistorderType,
        dialog: {
            isShowDialog: false,
            type: '',
            title: '',
            submitTxt: '',
        },
        rules: {
            id:{ required: true, message: "主键ID不能为空", trigger: "blur" },
            processId:{ required: true, message: "流程定义ID不能为空", trigger: "blur" },
            orderState:{ required: true, message: "状态不能为空", trigger: "blur" },
            creator:{ required: true, message: "发起人不能为空", trigger: "blur" },
            createTime:{ required: true, message: "发起时间不能为空", trigger: "blur" },
            endTime:{ required: true, message: "完成时间不能为空", trigger: "blur" },
            expireTime:{ required: true, message: "期望完成时间不能为空", trigger: "blur" },
            priority:{ required: true, message: "优先级不能为空", trigger: "blur" },
            parentId:{ required: true, message: "父流程ID不能为空", trigger: "blur" },
            orderNo:{ required: true, message: "流程实例编号不能为空", trigger: "blur" },
            variable:{ required: true, message: "附属变量json存储不能为空", trigger: "blur" },
        },
    });

    // 打开弹窗
    const openDialog = (type: string, row: HistorderType) => {
        state.dialog.type = type;
        state.dialog.isShowDialog = true;
        state.ruleForm = row;
        if (type === constConfig.dialogType.add) {
            state.dialog.title = '新增流程实例';
            state.dialog.submitTxt = '新 增';
        } else {
            state.dialog.title = '修改流程实例';
            state.dialog.submitTxt = '修 改';
        }
        nextTick(() => {
            historderDialogFormRef.value.clearValidate();
        });
    };
    // 关闭弹窗
    const closeDialog = () => {
        state.dialog.isShowDialog = false;
    };
    // 取消
    const onCancel = () => {
        closeDialog();
    };
    // 提交
    const onSubmit = () => {
        historderDialogFormRef.value.validate((valid: boolean) => {
            if (valid) {
                if (state.dialog.type === constConfig.dialogType.add) {
                    historderApi().save(state.ruleForm).then(() =>{
                        closeDialog();
                        emit('refresh');
                    })
                } else {
                    historderApi().update(state.ruleForm).then(()=>{
                        closeDialog();
                        emit('refresh');
                    })
                }
            }
        })
    };
    onMounted(() => {
        processApi().list().then((res: any) => {
            procesList.value = res.data ?? [];
        });
    });

    // 暴露变量
    defineExpose({
        openDialog,
    });
</script>
